<template>
  <main class="login-bg">
    <form action="javascript:return false;" @keydown.enter="userLogin">
      <div class="input-message">
        <i class="icon-user"></i>
        <input type="text" v-model="param.username" placeholder="用户名/手机/邮箱">
      </div>
      <div class="input-message">
        <i class="icon-lock"></i>
        <input type="password" name="" id="" v-model="param.password" placeholder="请输入密码">
      </div>
      <div style="margin-top:1rem;height:3rem;line-height:3rem;font-size:1.6rem;color:red">{{ loginErrorMessage }}</div>
      <button class="login-btn" type="button" @click="userLogin"><span>登 录</span></button>
      <div class="login-error-func">
        <div>
          忘记密码
        </div>
        <div class="parting-line"></div>
        <div>
          立即注册
        </div>
      </div>
    </form>
  </main>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
import { useRouter } from 'vue-router';
let router = useRouter();
let param = ref({
  username: "",
  password: ""
})
let loginErrorMessage = ref("");
let valueRules = (obj: any) => {
  for (let key in obj) {
    if (!obj[key]) {
      alert("请填写账号或密码！")
      return false;
    }
  }
  return true;
}

let userLogin = () => {
  if (!valueRules(param.value)) {
    return false;
  }
  axios.post("/api/login", param.value)
    .then(response => {
      let data = response.data;
      if (data.code == "200") {
        router.push({ path: "/home" });
      } else {
        loginErrorMessage.value = data.message;
      }
    })
    .catch(error => {
      console.error(error);
      alert("系统错误")
    });
}
</script>

<style scoped>
.login-bg {
  width: 100vw;
  height: 100vh;
  background: url("../assets/images/login-bg.png") 0rem -38rem no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-bg>form {
  padding-top: 6rem;
  width: 40rem;
  height: 20rem;
}

.login-bg>form>.input-message {
  width: 100%;
  position: relative;
  background: #fff;
  margin-top: 2rem;
  padding: 1rem;
  border-bottom: 1px solid #FF8D30;
}

.login-bg>form>.input-message>i {
  position: absolute;
  left: 0;
  top: 0.6rem;
  font-size: 2.6rem;
  color: #FF8D30;
}

.login-bg>form>.input-message>input {
  line-height: 1.6rem;
  width: 100%;
  border-width: 0;
  outline: none;
  background: #fff;
  padding-left: 2rem;
  font-size: 1.6rem;
}

.login-btn {
  width: 100%;
  margin-top: 2rem;
  border: 0;
  border-radius: 1.6rem;
  background-color: #FF8D30;
  margin-bottom: 2rem;
  cursor: pointer;
}

.login-btn>span {
  display: block;
  color: #fff;
  font-weight: 500;
  font-size: 1.8rem;
  padding: 1rem 0rem;
}

.login-error-func {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  color: #999;
}

.login-error-func>div {
  line-height: 2.4rem;
  cursor: pointer;
}

.login-error-func>div:hover {
  color: #FF8D30;
}

.login-error-func>.parting-line {
  margin: 0 2rem;
  height: 2.4rem;
  width: 0.1rem;
  border-left: 1px solid #bbb;
  cursor: auto;
}
</style>
